<template>
  <div class="wrap">
    <div id="cesiumContainer"></div>
    <div class="btns">
      <button @click="changeTerrain">地形切换</button>
      <button @click="baiduMap">百度地图</button>
      <button @click="removeLayer('baidu')">删除百度地图</button>
      <button @click="gaodeMap">高德地图</button>
      <button @click="removeLayer('gaode')">删除高德地图</button>
      <button @click="tdtMap">天地图</button>
      <button @click="removeLayer('tdt')">删除天地图</button>
      <button @click="wmsMap">WMS</button>
      <button @click="removeLayer('wms')">删除WMS</button>
      <button @click="wmtsMap">WMTS</button>
      <button @click="removeLayer('wmts')">删除WMS</button>
      <button @click="tmsMap">TMS</button>
      <button @click="removeLayer('tms')">删除TMS</button>
      <button @click="addPoint">添加点</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as CesiumSDK from '../src/index'
const { Cesium } = window as any;

let map: any = null
let hasTerrain = true
let graphicLayer: any = null;

const addPoint = ()=> {
  graphicLayer = new CesiumSDK.layer.GraphicLayer()
  map.addLayer(graphicLayer)
  const point = new CesiumSDK.graphic.PointEntity({
    position: [113.272448, 23.134162, 100],
    color: Cesium.Color.RED,
    pixelSize: 10
  })
  graphicLayer.addGraphic(point)
}
const changeTerrain = () => {
  hasTerrain = !hasTerrain
  map.hasTerrain = hasTerrain
}

const baiduMap = () => {
  let options = {
    id: 'baidu',
    layer: 'vec',
    src: 'WGS84'
  };
  const layer = new CesiumSDK.layer.BaiduLayer(options);
  map.addLayer(layer)
}

const removeLayer = (id) => {
  map.removeLayer(id)
}

const gaodeMap = () => {
  let options = {
    id: 'gaode',
    layer: 'vec_z',
    src: 'WGS84'
  };
  const layer = new CesiumSDK.layer.AmapLayer(options);
  map.addLayer(layer)
}

const tdtMap = () => {
  let options = {
    id: 'tdt',
    layer: 'img_d',
  };
  const layer = new CesiumSDK.layer.TdtLayer(options);
  map.addLayer(layer)
}

const wmsMap = () => {
  const layer = new CesiumSDK.layer.WmsLayer({
    id: "wms",
    url: "http://server.mars3d.cn/geoserver/mars/wms",
    layers: "mars:hf",
    parameters: {
      transparent: true,
      format: "image/png"
    }
  });
  map.addLayer(layer)
}

const wmtsMap = () => {
  const layer = new CesiumSDK.layer.WmtsLayer({
    id: 'wmts',
    url : 'http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS/tile/1.0.0/USGSShadedReliefOnly/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg',
    layer : 'USGSShadedReliefOnly',
    style : 'default',
    format : 'image/jpeg',
    tileMatrixSetID : 'default028mm',
    maximumLevel: 19,
  })
  map.addLayer(layer)
}

const tmsMap = () => {
  const layer = new CesiumSDK.layer.TmsLayer({
    id: 'tms',
    url:'https://data.mars3d.cn/tile/tms'
  })
  map.addLayer(layer)
}
onMounted(() => {
  const { Map } = CesiumSDK
  map = new Map('cesiumContainer', {
    basemaps: [
      {
        id:'tdt',
        name: '天地图',
        type: 'tdt',
        layer: 'img_d',
        show: true,
        zIndex: 2,
      },
      // {
      //   id:'gaode',
      //   name: '高德',
      //   type: 'gaode',
      //   layer: 'vec_z',
      //   show: true,
      //   zIndex: 1
      // },
    ],
    terrain: {
      show: false,
      url: 'https://data.mars3d.cn/terrain'
    }
  })
  console.log(map)
}) 
</script>
<style>
body {
  margin: 0;
  padding: 0;
}

#cesiumContainer {
  width: 100vw;
  height: 100vh;
}

.btns {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
}
</style>>
